<style>
    .major {
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-radius: 4px;
        box-sizing: border-box;
        padding: 10px;
        overflow-y: auto;
    }
    .major .inside {
        width: 1000px;
        height: 100%;
        margin: 0 auto;
    }
    .major .inside .major-title {
        width: 100%;
        font-size: 16px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #e8e8e8;
    }
    .major .inside .major-title .projectName {
        width: 50%;
        line-height: 40px;
        text-align: center;
    }
    .major .inside .major-title .projectName:nth-of-type(1) {
        width: 50%;
        border-right: 1px solid #e8e8e8;
    }
    .major .content {
        width: 100%;
        height: calc(100% - 40px);
        padding-top: 20px;
    }
    .major .patientList {
        width: 50%;
        height: 100%;
        overflow: auto;
        display: inline-block;
        vertical-align: top;
    }
    .major .projectList {
        width: 49%;
        height: 100%;
        overflow: auto;
        display: inline-block;
        vertical-align: top;
        text-align: center;
    }
    .major .projectList .active {
        background-color: #e8e8e8;
    }
    .major .projectList .projectWrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .major .projectList .projectRow {
        display: inline-block;
        margin-right: 15px;
    }
    .major .projectList .projectRow:nth-of-type(3n) {
        margin-right: 0;
    }
    .major .patientList .patientRow {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
    .major .patientList .active {
        background-color: #e8e8e8;
    }
    .major .patientList .patientRow .name {
        font-size: 14px;
        width: 30%;
        height: 100%;
        line-height: 50px;
        text-align: center;
    }
    .major .patientList .patientRow:hover {
        transition: all .2s linear;
        background-color: #e8e8e8;
    }
    .major .patientList .patientRow .project {
        width: 70%;
    }
    .major .patientList .patientRow .green {
        color: #67C23A;
    }
    .major .patientList .patientRow .grey {
        color: #909399;
    }   
    .major .el-checkbox {
        margin-right: 0 !important;
    }
    .major .save {
        position: fixed;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
    }
    .finish.is-disabled {
        border-color: #67C23A !important;
    }
    .finish.is-disabled .el-checkbox__label {
        color: #67C23A !important;
        font-size: 14px !important;
    }
    .finish.is-disabled .el-checkbox__inner {
        border-color: #67C23A !important;
    }
    .finish.is-disabled .el-checkbox__inner::after {
        border-color: #67C23A !important;
    } 
</style>

<body>
    <div class="major">
        <div class="inside">
            <div class="major-title">
                <div class="projectName">今日人员列表</div>
                <div class="projectName">项目（多选）</div>
            </div>
            <div class="content">
                <div class="patientList">
                    <div :class="['patientRow', current.ob && current.ob.patientId == item.patientId ? 'active' : '' ]" 
                        v-for="(item, index) in patientList" :key="index" @click="handleClick(item, index)">
                        <div class="name">{{ item.patientName }}</div>
                        <div :class="['project', item.project.length != 0 ? 'green' : 'grey' ]">
                            <!-- {{ getProject() }} -->
                        </div>
                    </div>
                    <div class="patientRow" v-if="patientList.length == 0">暂无人员列表</div>
                </div>
                <div class="projectList">
                    <template v-if="current.ob">
                        <div class="projectRow"  v-for="(item, index) in projectList">
                            <el-checkbox size="small" :class="[ item.finished ? 'finish' : '' ]" :disabled="item.finished" style="width: 150px;text-align: left;" 
                                :key="index" v-model="item.selected" @change="handleChangeCheckBox"
                                :label="item.name" border />
                        </div>
                    </template>
                    <div class="projectRow" style="color: #999;" v-else>
                        请先选择人员
                    </div>
                </div>
               
            </div>
            <el-button type="primary" class="save" @click="saveAnswer(true)">保存</el-button>
        </div>
    </div>
</body>

<script>
require([
    'jquery',
    'bbcare'
], function ($, $bb) {

    var URL = $bb.baseUrl('followup')

    var vm = new Vue({
        el: '.major',
        data: {
            patientList: [],
            projectList: [],
            current: {
                ob: null,
                index: 0
            },
            is_change: false
        },
        created: function () {
            this.getPatientList()
        },
        methods: {
            handleChangeCheckBox: function () {
                this.is_change = true
            },
            handleClick: function (row, index) {
                var that = this
                for (var i = 0; i < this.projectList.length; i++) {
                    if (this.projectList[i].selected && this.is_change) return this.$confirm(
                        '是否保存 '+ this.current.ob.patientName +' 选择的项目', '提示', {
                            type: 'warning',
                            confirmButtonText: '确认',
                            cancelButtonText: '取消'
                    }).then(function () {
                        that.saveAnswer(row, index)
                    }).catch(function () {
                        that.getNew(row, index)
                    })
                }
                this.getNew(row, index)
            },
            getNew: function (row, index) {
                this.current.ob = row
                this.current.index = index
                this.getProjectList()
            },
            saveAnswer: function (row, index) {
                var data = {
                    patient_id: this.current.ob.patientId,
                    patient_name: this.current.ob.patientName,
                    queue_ids: []
                }
                this.projectList.forEach(function (item) {
                    if (item.selected) data.queue_ids.push(item.id)
                })
                var that = this
                $bb.ajax({
                    url: URL + 'followup/queuing/office1/s',
                    data: JSON.stringify({ data: data }),
                    methods: 'POST',
                    success: function (res) {
                        that.$message.success(that.current.ob.patientName + ' 检查项目保存成功')
                        if (!row) that.getNew(row, index)
                        that.is_change = false
                    }
                })
            },
            /**
             * 获取当前用户列表
             */
            getPatientList: function() {
                var that = this
                $bb.ajax({
                    url: URL + 'followup/service/patient/patientOperateListQuery',
                    methods: 'POST',
                    data: JSON.stringify({
                        data: {
                            page: 1,
                            rows: 1000,
                            flag: 0
                        }
                    }),
                    success: function (res) {
                        res.data.rows.forEach(function (item) {
                            item.project = []
                        })
                        that.patientList = res.data.rows
                    }
                })
            },
            /**
             * 获取检查项目的列表
             */
             getProjectList: function () {
                var that = this
                $bb.ajax({
                    url: URL + 'followup/queuing/office1/q?patient_id=' + this.current.ob.patientId,
                    methods: 'POST',
                    success: function (res) {
                        that.projectList = res
                        that.is_change = false
                    }
                })
            },
            getProject: function () {
                var result = []
                this.projectList.forEach(item => {
                    if (item.selected) result.push(item.name)
                })
                return result.join('、')
            }
        }
    })

})    
</script>